<div class="layuimini-container">
    <form id="app-form" class="layui-form layuimini-form">

        <div class="layui-form-item">
            <label class="layui-form-label">模板名称</label>
            <div class="layui-input-block">
                <input type="text" name="template_name" class="layui-input" lay-verify="required" placeholder="请输入模板名称"
                       value="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">默认件数</label>
            <div class="layui-input-block">
                <input type="number" name="default_pieces" class="layui-input" lay-verify="required" placeholder="请输入默认件数"
                       value="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">默认价格</label>
            <div class="layui-input-block">
                <input type="number" name="default_price" class="layui-input" lay-verify="required" placeholder="请输入默认价格"
                       value="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">续件</label>
            <div class="layui-input-block">
                <input type="number" name="add_pieces" class="layui-input" lay-verify="required" placeholder="请输入续件"
                       value="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">续费</label>
            <div class="layui-input-block">
                <input type="number" name="add_price" class="layui-input" lay-verify="required" placeholder="请输入续费"
                       value="">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">邮寄方式</label>
            <div class="layui-input-block">
                {foreach $getIsPostageList as $k=>$v}
                <input type="radio" lay-filter="radio" name="is_postage" value="{$k}" title="{$v}" {in name="k"
                       value="0" }checked="" {/in}>
                {/foreach}
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">配送区域</label>
            <div class="layui-input-block" id="free">
                <table class="layui-table" lay-size="sm">
                    <thead>
                    <tr>
                        <th>选择包邮区域</th>
                        <th>包邮件数</th>
                        <th>包邮金额（元）</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="body">
                    <tr>
                        <td>
                            <div class="layui-input-inline" style="width: 100px;">
                                <!--                                <input type="number" placeholder="0" name="" class="layui-input">-->
                                <select name="pinkage[city_name][]" lay-filter="multiple" lay-tools
                                        data-select="{:url('freight.express/cityList')}"  multiple data-fields="city_name,city_name"
                                        data-value="{$row.city_name|default=''}">
                                </select>
                            </div>
                        </td>
                        <td>
                            <div class="layui-input-inline" style="width: 100px;">
                                <input type="number" placeholder="0" name="pinkage[pieces][]" class="layui-input">
                            </div>
                        </td>
                        <td>
                            <div class="layui-input-inline" style="width: 100px;">
                                <input type="number" placeholder="0" name="pinkage[pieces_price][]" class="layui-input">
                            </div>
                        </td>
                        <td>
                            <div class="layui-input-inline del" style="width: 100px;">
                                删除
                            </div>
                        </td>
                    </tr>
                    
                    </tbody>
                </table>
                <button type="button" id="add" class="layui-btn layui-btn-sm layui-btn-normal">添加</button>
            </div>


            <div class="layui-input-block" id="freight" style="display: none">
                <table class="layui-table" lay-size="sm">
                    <thead>
                    <tr>
                        <th>可配送区域</th>
                        <th>首件</th>
                        <th>运费（元）</th>
                        <th>续件</th>
                        <th>续费（元）</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody >
                    <tr>
                        <td>
                            <div class="layui-input-inline" style="width: 100px;">
                                <!--                                <input type="number" placeholder="0" name="" class="layui-input">-->
                                <select name="charge[fast_address][]" >
                                    <option value="全国">默认全国</option>
                                </select>
                            </div>
                        </td>
                        <td>
                            <div class="layui-input-inline" style="width: 100px;">
                                <input type="number" placeholder="0" name="charge[first_pieces][]" class="layui-input">
                            </div>
                        </td>
                        <td>
                            <div class="layui-input-inline" style="width: 100px;">
                                <input type="number" placeholder="0" name="charge[first_amount][]" class="layui-input">
                            </div>
                        </td>
                        <td>
                            <div class="layui-input-inline" style="width: 100px;">
                                <input type="number" placeholder="0" name="charge[add_pieces][]" class="layui-input">
                            </div>
                        </td>
                        <td>
                            <div class="layui-input-inline" style="width: 100px;">
                                <input type="number" placeholder="0" name="charge[add_amount][]" class="layui-input">
                            </div>
                        </td>
                        <td>
                            <div class="layui-input-inline delete" style="width: 100px;">
                                删除
                            </div>
                        </td>
                    </tr>
                    </thead>
                    <tbody id="tbody">
                    <tr>
                        <td>
                            <div class="layui-input-inline" style="width: 100px;">
                                <!--                                <input type="number" placeholder="0" name="" class="layui-input">-->
                                <select name="charge[fast_address][]" multiple lay-filter=""
                                        data-select="{:url('freight.express/cityList')}" data-fields="city_name,city_name"
                                        data-value="{$row.city_name|default=''}">
                                </select>
                            </div>
                        </td>
                        <td>
                            <div class="layui-input-inline" style="width: 100px;">
                                <input type="number" placeholder="0" name="charge[first_pieces][]" class="layui-input">
                            </div>
                        </td>
                        <td>
                            <div class="layui-input-inline" style="width: 100px;">
                                <input type="number" placeholder="0" name="charge[first_amount][]" class="layui-input">
                            </div>
                        </td>
                        <td>
                            <div class="layui-input-inline" style="width: 100px;">
                                <input type="number" placeholder="0" name="charge[add_pieces][]" class="layui-input">
                            </div>
                        </td>
                        <td>
                            <div class="layui-input-inline" style="width: 100px;">
                                <input type="number" placeholder="0" name="charge[add_amount][]" class="layui-input">
                            </div>
                        </td>
                        <td>
                            <div class="layui-input-inline delete" style="width: 100px;">
                                删除
                            </div>
                        </td>
                    </tr>


                    </tbody>
                </table>
                <button type="button" id="create" class="layui-btn layui-btn-sm layui-btn-normal">添加</button>
            </div>
        </div>


        <div class="hr-line"></div>
        <div class="layui-form-item text-center">
            <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit>确认</button>
            <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">重置</button>
        </div>

    </form>
</div>
<script>
    layui.use(['jquery', 'form', 'upload', 'element', 'layer'], function () {
        var $ = layui.jquery;
        var form = layui.form,
            upload = layui.upload,
            element = layui.element,
            layer = layui.layer;

        form.on('radio(radio)', function (data) {
            if (data.value == '0') {
                $("#free").show()
                $("#freight").hide()
            } else {
                $("#free").hide()
                $("#freight").show()
            }
        })


        $(document).on('click','.del',function () {
            $(this).parents('tr').remove()
        })

        $(document).on('click','.delete',function () {
            $(this).parents('tr').remove()
        })

        $("#add").click(function () {
            $.ajax(
                {
                    url:"cityList",
                    success(res){
                        console.log(res)
                        var data = res.data ;
                        var html = '<select name="pinkage[fast_address][]" lay-verify="required">'
                        for (const datum of data) {
                       html+=`
<option value="`+datum.city_name+`">`+datum.city_name+`</option>
`
                        }
                        html+=' </select>'
                        var htmls = `<tr>
                        <td>
                            <div class="layui-input-inline" style="width: 100px;">`+html+`
                            </div>
                        </td>
                        <td>
                            <div class="layui-input-inline" style="width: 100px;">
                                <input type="number" placeholder="0" name="pinkage[pieces][]" class="layui-input">
                            </div>
                        </td>
                        <td>
                            <div class="layui-input-inline" style="width: 100px;">
                                <input type="number" placeholder="0" name="pinkage[pieces_price][]" class="layui-input">
                            </div>
                        </td>
                        <td>
                            <div class="layui-input-inline del" style="width: 100px;">
                                删除
                            </div>
                        </td>
                    </tr>`;
                        $("#body").append(htmls)
                        form.render()
                    }
                }
            )

        })

        $("#create").click(function () {
            $.ajax(
                {
                    url:"cityList",
                    success(res){
                        console.log(res)
                        var data = res.data ;
                        var html = '<select name="charge[fast_address][]" lay-verify="required">'
                        for (const datum of data) {
                            html+=`
<option value="`+datum.city_name+`">`+datum.city_name+`</option>
`
                        }
                        html+=' </select>'
                        var htmls = `<tr>
                        <td>
                            <div class="layui-input-inline" style="width: 100px;">`+html+`
                            </div>
                        </td>
                       <td>
                            <div class="layui-input-inline" style="width: 100px;">
                                <input type="number" placeholder="0" name="charge[first_pieces][]" class="layui-input">
                            </div>
                        </td>
                        <td>
                            <div class="layui-input-inline" style="width: 100px;">
                                <input type="number" placeholder="0" name="charge[first_amount][]" class="layui-input">
                            </div>
                        </td>
                        <td>
                            <div class="layui-input-inline" style="width: 100px;">
                                <input type="number" placeholder="0" name="charge[add_pieces][]" class="layui-input">
                            </div>
                        </td>
                        <td>
                            <div class="layui-input-inline" style="width: 100px;">
                                <input type="number" placeholder="0" name="charge[add_amount][]" class="layui-input">
                            </div>
                        </td>
                        <td>
                            <div class="layui-input-inline delete" style="width: 100px;">
                                删除
                            </div>
                        </td>
                    </tr>`;
                        $("#tbody").append(htmls)
                        form.render()
                    }
                }
            )

        })
    })
</script>